<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{padding:0;margin:0;}
	#container{
		width:500px;
		height:250px;
		position: absolute;
		top:100px;
		left:200px;
		overflow: hidden;
		background: red;
	}
	.glitch{
		width:500px;
		height:250px;
		position: absolute;
	}
	img{
		position: absolute;
	}
	span{
		position: absolute;
		top:0;left:0;right:0;bottom:0;
		margin:auto;
		font-size: 40px;
		color:white;
		z-index: 10;
		line-height: 100px;
		text-align: center;
		width:300px;
		height: 100px;
	}
</style>
<script src='./glitch-effect.js'></script>
</head>
<body>
	<div id='container'>
		<div class="glitch">
			<span>glitch effect</span>
			<img src="./img.jpg" alt="">	
		</div>
	</div>
</body>
</html>
<script>
	const glitch = new Glitch(document.getElementsByClassName('glitch')[0])
    glitch.start()
</script>